<template>
  <div id="app">
    <!--<Menu />-->
    <Head :isNav="isNav" :title="title" :push="{
      isShow: pushAddress,
      currentAddress: currentAddress
      }" ref="head" />
    <div class="wrapper" id="wrapper" :style="`height: ${wrapperHeight}px`">
      <keep-alive>
        <!-- eslint-disable max-len -->
        <router-view v-if="$route.meta.keepAlive" @onPrompt="handelPrompt" :style="`height: ${wrapperHeight}px`" ref="route" class="Router RouterView"/>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" @onPrompt="handelPrompt" :style="`height: ${wrapperHeight}px`" ref="route" class="Router RouterView"/>
    </div>
    <!-- eslint-disable max-len -->
    <Popups class="global_pop" :isMaskDown="isMaskDown" :VClose="isCloseEl" :isShow.sync="isPopup_Prompt" :title="popup_title">
      <div  :class="['cancel-info', `info-${textAlign}`]" slot="body">
        <span>
          {{popup_info}}
        </span>
      </div>
      <div slot="footer" v-if="isConfirm" class="pop-footer-btns">
        <button class="pop-footer-close" @click="backApp" >确定</button>
      </div>
    </Popups>
  </div>
</template>
<script>
import TransitionRouterView from "~/transitionRouterView";
import Ajax from "@/mixins/ajax";
import Menu from "~/menu";
import Head from "~/header/head";
import { Popups } from "~/popOut";

export default {
  name: "Index",
  components: {
    TransitionRouterView,
    Menu,
    Head,
    Popups
  },
  mixins: [Ajax],
  data() {
    return {
      isNav: !this.$route.meta.home,
      title: this.$route.meta.title || "",
      pushAddress: this.$route.meta.push || false,
      currentAddress: this.$route || null,
      isBottomBar: false,
      // 弹框状态
      isPopup_Prompt: false,
      isMaskDown: false,
      isCloseEl: true,
      isConfirm: true,
      popup_title: "",
      popup_info: "",
      textAlign: "left",
      wrapperHeight: 0
    };
  },
  created() {
    const re = /\?newToken=(.*)/;
    const { search } = window.location;
    const tokenSearch = re.exec(search);
    if (tokenSearch) {
      localStorage.setItem("token", tokenSearch[1]);
    }
  },
  mounted() {
    // 获取head元素
    const headEl = this.$refs.head.$el;
    const headHeight = this.getElHeight(headEl);
    this.wrapperHeight = this.getHeight() - headHeight;
  },
  methods: {
    /**
     * 返回集分竞宝APP
     */
    backApp() {
      this.isPopup_Prompt = false;
    },
    /**
     * 处理错误信息
     */
    handelPrompt(obj) {
      const { isCloseEl, isConfirm, isPrompt, textAlign, title, info, isMaskDown, callback } = obj;
      this.isMaskDown = isMaskDown;
      this.isCloseEl = isCloseEl;
      this.isConfirm = isConfirm;
      this.popup_title = title || "";
      this.popup_info = info || "";
      this.textAlign = textAlign || "left";
      this.isPopup_Prompt = isPrompt;
      /* eslint-disable no-unused-expressions */
      callback && callback();
    }
  },
  watch: {
    /**
     * 监听路由变化
     */
    $route(to) {
      // 设置导航头文字
      this.title = to.meta.title || "";
      if (to.meta.home) {
        this.isNav = false;
      } else {
        this.isNav = true;
      }
      if (to.meta.push) {
        this.pushAddress = true;
      } else {
        this.pushAddress = false;
      }
      this.currentAddress = to;
    }
  }
};
</script>

<style scoped>
/* 全局提示框 */
.popups-box.global_pop {
  z-index: 9999;
}
.wrapper {
  width: auto;
  overflow: hidden;
  background: #f5f5f4;
}
.Router {
  width: 100%;
}
.info-left {
  text-align: left;
}
.info-center {
  text-align: center;
}
.info-right {
  text-align: right;
}
.cancel-info {
  margin-top: 0.62rem;
  font-size: 0.4rem;
}
.pop-footer-btns .pop-footer-close {
  width: 5.01rem;
  height: 1.08rem;
  background-color: #d11463;
  border-radius: 2rem;
  color: #fff;
  font-size: 0.54rem;
}
</style>

